<template>
  <div class='container'>
    <el-dialog :title="showTitle" :visible="showAddDialog" width="800px" @close="btnCancel" open="open">
      <el-form ref="articlesForm" :model="articlesData" :rules="articlesRules" label-width="120px"
        style="width: 80%; margin-left:10px;" v-loading="loading">
        <el-form-item label="文章标题：" prop="title">
          <el-input v-model="articlesData.title" placeholder="请输入文章标题" />
        </el-form-item>
        <el-form-item label="文章内容：" prop="articleBody">
          <el-upload :multiple="true" :showUploadList="false" action="http://geek.itheima.net/v1_0/upload" name="image"
            style="display: none" class="avatar-uploader" :on-success="uploadSuccess" />
          <quillEditor v-model="articlesData.articleBody" :options="editorOption" style="min-height: 200px;"
            @blur="onEditorBlur" ref="myQuillEditor" />
        </el-form-item>
        <el-form-item label="视频地址：">
          <el-input v-model="articlesData.videoURL" placeholder="请输入视频地址" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="btnOK">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 富文本组件
import { quillEditor } from 'vue-quill-editor'

import { add, update } from "@/api/hmmm/articles";
export default {
  components: {
    quillEditor
  },
  props: {
    showAddDialog: {
      type: Boolean,
      default: false
    },
    articlesData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 富文本配置项
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote'],
              ['code-block', 'image', 'link']
            ],//工具菜单栏配置

            handlers: {
              // 劫持原生的点击图片触发事件  指向el-upload
              'image': () => {
                document.querySelector('.avatar-uploader input').click()
              }
            }
          }
        },
        placeholder: '', //提示
      },
      articlesRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      loading: false,
    }
  },
  methods: {
    // 富文本框失去焦点
    onEditorBlur () {
      // 做单独验证
      this.$refs.articlesForm.validateField('articleBody')
    },
    // 取消
    btnCancel () {
      this.$refs.articlesForm.resetFields()
      /**
       * 主动让富文本失去焦点  
       * 解决当光标在富文本中时 点击取消之后 
       * 再次打开弹层后 在非富文本区域点击之后 会触发富文本的校验
       */
      this.$refs.myQuillEditor.quill.setSelection(null)
      this.$emit('update:showAddDialog', false)
    },
    // 确认
    async btnOK () {
      try {
        await this.$refs.articlesForm.validate()
        this.loading = true
        // 判断 是修改 还是新增
        if (this.articlesData.id) {
          // 修改
          await update(this.articlesData)
          this.$message.success('修改成功')
          this.$emit('articlesAdd')  // 触发父组件方法 重新获取数据
        } else {
          // 新增
          await add(this.articlesData)
          this.$message.success('添加成功')
          /**
           * 新增时可以调用换页的方法 
           * 因为是添加到头部 所以直接跳到第一页
           */
          this.$emit('pageChange', 1)
        }
        this.loading = false
        this.btnCancel()
      } catch (error) {
        console.log(error);
      }
    },
    /**
     *  富文本原本上传的图片是base64格式的  服务器接收不了
     *  借助element-ui 的el-upload 将图片上传到http://geek.itheima.net/v1_0/upload 并返回一个网络地址
     *  将这个地址重新写入到富文本中
     */
    uploadSuccess (res) {
      // console.log(res);
      // 获取富文本Dom实例
      let quill = this.$refs.myQuillEditor.quill
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片，res.data.url为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败！')
      }
    }
  },
  computed: {
    // 动态显示弹窗标题
    showTitle () {
      return this.articlesData.id ? '修改文章' : '新增文章'
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
  height: 200px;
}
</style>
